<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li[age] {
            color: skyblue
        }
        li[nikename='kitty'] {
            color: greenyellow
        }
        li[sex^='fe'] {
            color: pink;
        }
        li[city$='cn'] {
            color: rgb(230,0,0)
        }
        li[fruit*='p'] {
            color: brown;
        }
        input[type=button],input[type=text] {
            border: 3px solid deeppink;
        }
        input:not([type=button]):not([type=text]) {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <h1>属性选择器</h1>
    <h2>含有某个属性即选中</h2>
    <ul>
        <li age>张三</li>
        <li age="11">李四</li>
        <li>王五</li>
    </ul>
    <h2>属性等于某个值 [属性='xxx']</h2>
    <ul>
        <li>旺财</li>
        <li nikename>来福</li>
        <li nikename="kitty">凯蒂</li>
        <li nikename="petch">佩奇</li>
    </ul>
    <h2>属性匹配: 前匹配 [属性^='xxx']</h2>
    <ul>
        <li sex="male">小明</li>
        <li sex="female">小红</li>
        <li sex="male">小强</li>
        <li sex="female">小丽</li>
    </ul>

    <h2>属性匹配: 后匹配 [属性$='xxx']</h2>
    <ul>
        <li city="shanghai-cn">上海</li>
        <li city="los-angeles-usa">洛杉矶</li>
        <li city="beijin-cn">北京</li>
        <li city="new-york-usa">纽约</li>
    </ul>

    <h2>属性匹配: 模糊匹配[属性*='xxx']</h2>
    <ul>
        <li fruit="apple">苹果</li>
        <li fruit="banana">香蕉</li>
        <li fruit="orange">桔子</li>
        <li fruit="pear">梨</li>
    </ul>
    <div>
        <input type="text" value="abcde">
        <input type="password" value="1234">
        <input type="button" value="xxxx">
    </div>
</body>
</html>